<template>
    
    <el-card>
      <el-space style="width: 100%; justify-content: flex-end">
        <el-space>
            <el-button type="primary" @click="updateZyqcr(true, {})">新增</el-button>
        </el-space>
    </el-space>
    </el-card>
    <el-table
      v-loading="state.oneDataListLoading"
      :data="state.oneTableData"
      stripe
      border
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="55" header-align="center" align="center"/>
      <el-table-column prop="mainDrafterName" label="姓名" header-align="center" align="center"/>
      <el-table-column prop="" label="操作" width="150" header-align="center" align="center">
        <template #default="scope">
          <el-icon :size="16" color="#1491FF" title="编辑" style="cursor: pointer; margin: 0 6px" @click="updateZyqcr(false, scope.row)">
						<Edit />
					</el-icon>
          <el-icon :size="16" color="#fe6360" title="删除" style="cursor: pointer; margin: 0 6px" @click="deleitem(scope.row.id)">
						<Delete />
					</el-icon>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding-bottom: 15px;">
      <el-pagination :current-page="state.onePageNum" :page-sizes="state.onePageSizes" :page-size="state.onePageSize"
        :total="state.oneTotal" layout="total, sizes, prev, pager, next, jumper" @size-change="oneSizeChangeHandle"
        @current-change="oneCurrentChangeHandle">
      </el-pagination>
    </div>
  
    <cmDialog
      v-model="dialogOneVisible"
      :modal-title="state.titleFlag"
      :before-close="addOrdelCancel"
      model-width="30%"
    >
      <el-form :model="state.oneForm" ref="zyqcrFormRef" :rules="rules">
        <el-form-item label="起草人姓名" label-width="100px" prop="mainDrafterName">
          <el-input v-model="state.oneForm.mainDrafterName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="起草人职务" label-width="100px" prop="mainDrafterTitle">
          <el-input v-model="state.oneForm.mainDrafterTitle" autocomplete="off" />
        </el-form-item>
        <el-form-item label="起草人单位" label-width="100px" prop="mainDrafterCompany">
          <el-input v-model="state.oneForm.mainDrafterCompany" autocomplete="off" />
        </el-form-item>
        <el-form-item label="起草内容" label-width="100px" prop="responsibleContent">
          <el-input v-model="state.oneForm.responsibleContent" autocomplete="off" />
        </el-form-item>
        
        <el-form-item label="是否发布" label-width="100px" prop="isPublish">
          <el-radio-group v-model="state.oneForm.isPublish">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="起草人备注" label-width="100px">
          <el-input v-model="state.oneForm.drafterRemark"  type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-foot" style="padding-bottom: 20px;padding-right: 20px;">
          <el-button type="primary" @click="addOrdelSum(zyqcrFormRef)">
            提交
          </el-button>
          <el-button @click="addOrdelCancel">关闭</el-button>
        </div>
      </template>
    </cmDialog>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import cmDialog from '@/components/cm-dialog/index.vue'
  import type { FormInstance, FormRules } from 'element-plus'

  import {  mainDrafterListApi, mainDrafterUpdateApi, mainDrafterDelApi } from '@/api/standard/maintenance/index'

  const state = reactive({
    oneTableData: [],
    oneDataListLoading: false,
    onePageNum: 1,
    onePageSize: 10,
    oneTotal: 1,
    onePageSizes: [10, 20],

    oneForm: {
      systemId: "",
      mainDrafterName: "",
      mainDrafterTitle: "",
      mainDrafterCompany: "",
      responsibleContent: "",
      drafterRemark: "",
      isPublish: "",
    },
    titleFlag: "",
  })
  const props = defineProps({
    datainfo: { // 编制申报传递参数id、列表编辑id  对象
      type: Object,
      default: () => ({})
    }
  })
    // 获取数据
  const initQcr = async () => {
    state.oneForm.systemId = props.datainfo.id
    var params = {
      systemId: props.datainfo.id
    }
    state.oneDataListLoading = true
    await mainDrafterListApi(params).then(res => {  // 主编单位list
      state.oneTableData = res.data.list
      state.oneDataListLoading = false
      state.onePageNum = res.data.pageNum
      state.onePageSize = res.data.pageSize
      state.oneTotal = res.data.total
      // console.log("主编单位：", state.oneTableData)
    })
  }
  const dialogOneVisible = ref(false)
  // 表单验证
  interface RuleForm {
    id: string | Number,
    systemId: string | Number,
    mainDrafterName: string,
    mainDrafterTitle: string,
    mainDrafterCompany: string,
    responsibleContent: string,
    drafterRemark: string,
    isPublish: string | Number,
  }
  const zyqcrFormRef = ref<FormInstance>()
  const rules = reactive<FormRules<RuleForm>>({
    mainDrafterName: [{ required: true, message: '请输入起草人姓名', trigger: 'blur' }],
    mainDrafterTitle: [{ required: true, message: '请选择起草人职务',trigger: ['blur', 'change'] }],
    mainDrafterCompany: {required: true, message: '起草人单位',trigger: ['blur', 'change']},
    responsibleContent: {required: true, message: '起草内容',trigger: ['blur', 'change']},
    isPublish: {required: true, message: '请选择是否发布',trigger: ['blur', 'change']},
  })

  const updateZyqcr = (isUpdate: Boolean, row: any) => {
    state.titleFlag = isUpdate ? "主要起草人新增" : "主要起草人编辑"
    if(!isUpdate) {
      state.oneForm = {...row}
    }
    dialogOneVisible.value = true
  }

  const deleitem = (id: String|Number) => {
    	ElMessageBox.confirm('确定要删除吗？', '删除', {
    		confirmButtonText: '确定',
    		cancelButtonText: '取消',
    		type: 'warning'
    	}).then(() => {
        delMethods(id)
    	})
  }
  const delMethods = async (id: Number|String) => {
    var params = {
      id: id
    }
    await mainDrafterDelApi(params).then(res => {  // 主编单位list
      ElMessage.success({
        message: '操作成功',
        duration: 500,
      })
      addOrdelCancel()
      initQcr()
    })
  }
  const oneSizeChangeHandle = () => { }
  const oneCurrentChangeHandle = () => { }
  // 提交数据
  const addOrdelSum = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        submitone()
      } else {
        console.log('提交错误', fields)
      }
    })
  }

  const submitone = async () => {
    await mainDrafterUpdateApi(state.oneForm).then(res => {  // 主编单位list
        ElMessage.success({
          message: '操作成功',
          duration: 500,
        })
        addOrdelCancel()
        initQcr()
    })
  }

  const addOrdelCancel = () =>{
    zyqcrFormRef.value?.resetFields(); // 表单验证关闭
    dialogOneVisible.value = false
    state.oneForm = {
      systemId: "",
      mainDrafterName: "",
      mainDrafterTitle: "",
      mainDrafterCompany: "",
      responsibleContent: "",
      drafterRemark: "",
      isPublish: "",
    }
  }

  defineExpose({
    initQcr,
  })

  </script>
  